<template>
  <div>
    <div class="m-d-charts">
      <el-row class="c-height" v-loading="loading">
        <el-col :span="16" class="c-height">
          <div class="grid-content bg-purple c-height" id="hotAddress"></div>
        </el-col>
        <el-col :span="8" class="c-height">
          <div class="grid-content bg-purple c-height">
            <div class="c-table ctt">
              <el-table :data="detailData" style="width: 100%" stripe border>
                <el-table-column property="address" label="地域" width="120" align="center"></el-table-column>
                <el-table-column property="num" label="信息量" width="120" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :class="{province:isActive}"
      @open="open()" @close="closeDia()">
      <el-dialog
        title="相关信息"
        :visible.sync="innerVisible"
        append-to-body>
        <el-table :data="gridData" height="400" stripe>
          <el-table-column property="title" label="标题" width="400">
            <template slot-scope="scope">
              <span v-html="scope.row.title"></span>
            </template>
          </el-table-column>
          <el-table-column property="source" label="来源" align="center">
            <template slot-scope="scope">
              <span v-html="scope.row.source"></span>
            </template>
          </el-table-column>
          <el-table-column property="href" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click="handleInnerClick(scope.row)"
                type="text"
                size="small">
                查看原网址
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-row class="c-height" v-loading="loadingTwo">
        <el-col :span="16" class="c-height">
          <div class="grid-content bg-purple c-height" id="hotProvince"></div>
        </el-col>
        <el-col :span="8" class="c-height">
          <div class="grid-content bg-purple c-height">
            <div class="c-table table-inner ctt">
              <el-table :data="detailProvinceData" style="width: 100%" stripe border>
                <el-table-column property="address" label="地域" width="100" align="center"></el-table-column>
                <el-table-column property="num" label="信息量" width="100" align="center"></el-table-column>
                <el-table-column property="list" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleClick(scope.row)"
                      type="text"
                      size="small">
                      查看详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import api from '../api/api'
  import echarts from 'echarts/lib/echarts'

  import 'echarts/map/js/china.js';
  import 'echarts/map/js/province/anhui.js';
  import 'echarts/map/js/province/aomen.js';
  import 'echarts/map/js/province/beijing.js';
  import 'echarts/map/js/province/chongqing.js';
  import 'echarts/map/js/province/fujian.js';
  import 'echarts/map/js/province/gansu.js';
  import 'echarts/map/js/province/guangdong.js';
  import 'echarts/map/js/province/guangxi.js';
  import 'echarts/map/js/province/guizhou.js';
  import 'echarts/map/js/province/hainan.js';
  import 'echarts/map/js/province/hebei.js';
  import 'echarts/map/js/province/heilongjiang.js';
  import 'echarts/map/js/province/henan.js';
  import 'echarts/map/js/province/hubei.js';
  import 'echarts/map/js/province/hunan.js';
  import 'echarts/map/js/province/jiangsu.js';
  import 'echarts/map/js/province/jiangxi.js';
  import 'echarts/map/js/province/jilin.js';
  import 'echarts/map/js/province/liaoning.js';
  import 'echarts/map/js/province/neimenggu.js';
  import 'echarts/map/js/province/ningxia.js';
  import 'echarts/map/js/province/qinghai.js';
  import 'echarts/map/js/province/shandong.js';
  import 'echarts/map/js/province/shanghai.js';
  import 'echarts/map/js/province/shanxi.js';
  import 'echarts/map/js/province/shanxi1.js';
  import 'echarts/map/js/province/sichuan.js';
  import 'echarts/map/js/province/taiwan.js';
  import 'echarts/map/js/province/tianjin.js';
  import 'echarts/map/js/province/xianggang.js';
  import 'echarts/map/js/province/xinjiang.js';
  import 'echarts/map/js/province/xizang.js';
  import 'echarts/map/js/province/yunnan.js';
  import 'echarts/map/js/province/zhejiang.js';

  export default {
    name: "address-echarts",
    props: ['keywordId', 'timeRange'],
    data() {
      return {
        loading: true,
        loadingTwo: false,
        isActive: true,
        mapData: [],
        mapProvinceData: [],
        maxNum: 0,
        maxProvinceNum: 0,
        detailData: [],
        detailProvinceData: [],
        dialogVisible: false,
        innerVisible: false,
        provinceParams: null,
        gridData: []
      }
    },
    mounted() {
      this.hotAddress = echarts.init(document.getElementById('hotAddress'));
      this.getData();
      this.resize();
      let that = this;
      this.hotAddress.on('click', function (params) {
        if (isNaN(params.value)) {
          return false
        }
        that.loadingTwo = true;
        that.provinceParams = params.data;
        that.dialogVisible = true
      })
    },
    methods: {
      resize() {
        // echarts自适应页面
        const self = this;
        setTimeout(() => {
          window.onresize = function () {
            self.hotAddress.resize()
          }
        }, 20)
      },
      getData() {
        api.HotMap({keywordId: this.keywordId, fromDateString: this.fromDateString, toDateString: this.toDateString})
          .then(res => {
            this.loading = false;
            this.mapData = [];
            this.detailData = [];
            let tableNum = res.placeList.length > 10 ? 10 : res.placeList.length;
            for (let k = 0; k < tableNum; k++) {
              this.detailData.push({
                address: res.placeList[k].latidude.name,
                num: res.placeList[k].count
              })
            }
            if (res.placeList.length == 0) {
              this.maxNum = 100;
            } else {
              this.maxNum = res.placeList[0].count;
              for (let i = 0; i < res.placeList.length; i++) {
                let count = res.placeList[i].count;
                let py = res.placeList[i].latidude.pinyin.split(',')[0] + res.placeList[i].latidude.pinyin.split(',')[1];
                this.mapData.push({
                  id: res.placeList[i].latidude.id,
                  py: py,
                  name: res.placeList[i].latidude.name,
                  value: count
                });
              }
            }
            this.initData();
          }).catch(e => {
          console.log(e);
        });
      },
      initData() {
        const option = {
          toolbox: {
            show: true,
            itemSize: 20,
            right: 20,
            feature: {
              dataZoom: {show: false},
              dataView: {show: false},
              magicType: {show: false},
              restore: {show: false},
              saveAsImage: {}
            }
          },
          backgroundColor: '#ffffff',
          tooltip: {
            trigger: 'item',
          },
          series: [{
            name: '信息量',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: this.mapData
          }
          ],
          visualMap: {
            min: 0,
            max: this.maxNum,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true,
            inRange: {
              color: ['#3EACE5', '#F02FC2']
            }
          }
        };
        this.hotAddress.setOption(option);
      },
      initProvinceData() {
        this.hotProvince = echarts.init(document.getElementById('hotProvince'));
        const option = {
          toolbox: {
            show: true,
            itemSize: 20,
            right: 20,
            feature: {
              dataZoom: {show: false},
              dataView: {show: false},
              magicType: {show: false},
              restore: {show: false},
              saveAsImage: {}
            }
          },
          backgroundColor: '#ffffff',
          tooltip: {
            trigger: 'item',
          },
          series: [{
            name: '信息量',
            type: 'map',
            mapType: this.provinceParams.name,
            roam: false,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: this.mapProvinceData
          }
          ],
          visualMap: {
            min: 0,
            max: this.maxProvinceNum,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true,
            inRange: {
              color: ['#3EACE5', '#F02FC2']
            }
          }
        };
        this.hotProvince.setOption(option);
      },
      handleClick(row) {
        this.gridData = [];
        this.innerVisible = true;
        for (let j = 0; j < row.list.length; j++) {
          this.gridData.push({
            title: row.list[j].title,
            source: row.list[j].sourceSpider,
            href: row.list[j].url
          })
        }
      },
      handleInnerClick(row) {
        window.open(row.href);
      },
      open() {
        api.HotProvinceMap({
          keywordId: this.keywordId,
          fromDateString: this.fromDateString,
          toDateString: this.toDateString,
          provinceId: this.provinceParams.id
        }).then(res => {
          this.loadingTwo = false;
          this.maxProvinceNum = res.placeList[0].count;
          for (let i = 0; i < res.placeList.length; i++) {
            this.maxProvinceNum = res.placeList[0].count;
            let count = res.placeList[i].count;
            this.mapProvinceData.push({
              name: res.placeList[i].latidude.fullname,
              value: count
            });
            this.detailProvinceData.push({
              address: res.placeList[i].latidude.fullname,
              num: res.placeList[i].count,
              list: res.placeList[i].list
            })
          }
          this.initProvinceData()
        })
      },
      closeDia() {                      // 关闭dialog回调初始化
        this.hotProvince.clear();
        this.loadingTwo = true;
        this.mapProvinceData = [];
        this.detailProvinceData = []
      }
    },
    watch: {
      keywordId() {
        this.hotAddress.clear();
        this.loading = true;
        this.getData()
      },
      timeRange() {
        if (this.timeRange == null) {
          this.fromDateString = '';
          this.toDateString = ''
        } else {
          this.fromDateString = this.timeRange[0];
          this.toDateString = this.timeRange[1];
        }
        this.hotAddress.clear();
        this.loading = true;
        this.getData()
      }
    }
  }
</script>

<style lang="less">
  @import "../style/mixin";

  .c-height {
    position: relative;
    height: 100%;
  }

  .c-table .el-table thead tr th {
    background-color: #0067F5 !important;
    color: #fff;
  }

  .province .el-dialog {
    width: 1200px;
    height: 700px;
  }

  .province .el-dialog__body {
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    padding: 0;
  }

  .table-inner .el-table td, .c-table .el-table th {
    padding: 3px 0;
  }
  @media screen and (max-width: 1367px) {
    .c-table .el-table td, .c-table .el-table th {
      padding: 0 0;
    }
    .province .el-dialog {
      width: 1000px;
      height: 520px;
    }
  }
</style>
